<template>
	<view class="root">
		<view class="ai-center mt-60">
			<text class="fs-48 color-454545">服务已完成</text>
			<text class="fs-28 color-454545 mt-12">请对本次服务做出评价吧</text>

			<view class="fd-row mt-40">
				<image
					v-for="(n, index) in 5"
					:key="n"
					class="width-54 height-54 ml-4 mr-4"
					:src="`/static/images/icon-star_${Number(index < stars)}.png`"
					@click="star(index)"
					mode="aspectFit"
				/>
			</view>

			<view :style="{ margin: `68rpx 44rpx` }" class="fd-row jc-center flex-wrap fs-28">
				<label
					v-for="tag in tags"
					:key="tag.id"
					:class="[{ active: tagIds.includes(tag.id) }, 'tag lh-2 pl-30 pr-30 br-28']"
					@click="chooseTag(tag.id)"
				>
					{{ tag.name }}
				</label>
			</view>

			<textarea
				:style="{ border: `1rpx solid #d2d2d2`, padding: `30rpx` }"
				v-model="content"
				class="br-10 fs-28"
				placeholder-style="color: #bcbcbc"
				placeholder="写其他意见和建议"
			/>
		</view>
		<button
			:plain="true"
			:style="{ margin: `200rpx 30rpx 44px` }"
			hover-class="tap-hover"
			class="bgc-3ec483 border-none br-10 color-fff br-10 fs-30 lh-3"
			@click="submit"
		>
			保存
		</button>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class Evaluate extends Vue {
		// component property
		order_id: number = 0;
		type: number = 0;
		stars: number = 3;
		tags: string[] = [];
		tagIds: number[] = [];
		content: string = "";

		onLoad({ order_id, order_type }: AnyObject) {
			this.order_id = +order_id;
			this.type = +order_type;
			this.$request.get("/comment/tags").then(({ data }) => (this.tags = data));
		}

		star(index: number) {
			this.stars = index + 1;
		}
		chooseTag(id: number) {
			const { tagIds } = this,
				hasIndex = tagIds.indexOf(id);

			hasIndex === -1 ? tagIds.push(id) : tagIds.splice(hasIndex, 1);
		}
		submit() {
			this.$request
				.post("/order/comment", {
					id: this.order_id,
					type: this.type,
					content: this.content,
					tags: this.tagIds.toString(),
					start_num: this.stars,
				})
				.then(({ errmsg: title }) =>
					uni.showToast({
						title,
						success: () => setTimeout(uni.navigateBack, 1500),
					})
				);
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.tag {
		background-color: rgba(64, 196, 132, 0.1);
		color: #3ec483;
		margin: 12rpx 18rpx;
		&.active {
			color: #fff;
			background-color: #3ec483;
		}
	}
</style>